import React, { useRef, useEffect } from 'react';
import { X, Maximize2, Minimize2, Bot, User } from 'lucide-react';
import { Message } from '../types';

interface FloatingChatProps {
  onClose: () => void;
  messages: Message[];
  isTyping: boolean;
  expanded: boolean;
  onToggleExpand: () => void;
}

export function FloatingChat({
  onClose,
  messages,
  isTyping,
  expanded,
  onToggleExpand
}: FloatingChatProps) {
  const messagesEndRef = useRef<HTMLDivElement>(null);
  
  // 自动滚动到底部
  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };
  
  useEffect(() => {
    scrollToBottom();
  }, [messages, isTyping]);
  
  return (
    <div 
      className={`bg-white rounded-lg shadow-xl flex flex-col transition-all duration-300 ${
        expanded ? 'h-[500px]' : 'h-[350px]'
      }`}
    >
      {/* 头部 */}
      <div className="flex items-center justify-between p-3 border-b">
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
            <Bot className="w-5 h-5 text-blue-600" />
          </div>
          <h3 className="font-medium">知识库助手</h3>
        </div>
        <div className="flex items-center">
          <button
            onClick={onToggleExpand}
            className="p-1.5 hover:bg-gray-100 rounded-full transition-colors"
            title={expanded ? "缩小" : "放大"}
          >
            {expanded ? <Minimize2 className="w-5 h-5" /> : <Maximize2 className="w-5 h-5" />}
          </button>
          <button
            onClick={onClose}
            className="p-1.5 hover:bg-gray-100 rounded-full transition-colors ml-1"
            title="关闭"
          >
            <X className="w-5 h-5" />
          </button>
        </div>
      </div>
      
      {/* 消息区域 */}
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {messages.length === 0 ? (
          <div className="text-center text-gray-500 mt-8">
            <Bot className="w-12 h-12 mx-auto text-blue-200 mb-2" />
            <p>您可以向知识库助手提问</p>
            <p className="text-sm">助手将基于您的知识库内容回答问题</p>
          </div>
        ) : (
          messages.map((msg) => (
            <div 
              key={msg.id} 
              className={`flex gap-2 ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`}
            >
              {msg.sender === 'ai' && (
                <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                  <Bot className="w-5 h-5 text-blue-600" />
                </div>
              )}
              
              <div 
                className={`max-w-[80%] px-3 py-2 rounded-lg ${
                  msg.sender === 'user' 
                    ? 'bg-blue-600 text-white' 
                    : 'bg-gray-100 text-gray-800'
                }`}
              >
                <p className="text-sm whitespace-pre-wrap">{msg.content}</p>
                
                {msg.source && (
                  <div className="mt-1 pt-1 border-t border-gray-200 text-xs text-gray-500 flex items-center gap-1">
                    <span>来源: {msg.source.fileName}</span>
                  </div>
                )}
              </div>
              
              {msg.sender === 'user' && (
                <div className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center flex-shrink-0">
                  <User className="w-5 h-5 text-white" />
                </div>
              )}
            </div>
          ))
        )}
        
        {isTyping && (
          <div className="flex gap-2">
            <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
              <Bot className="w-5 h-5 text-blue-600" />
            </div>
            <div className="bg-gray-100 px-3 py-2 rounded-lg">
              <div className="flex gap-1">
                <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></span>
                <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></span>
                <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.4s' }}></span>
              </div>
            </div>
          </div>
        )}
        
        <div ref={messagesEndRef} />
      </div>
      
      {/* 底部提示 */}
      <div className="p-3 border-t text-center text-sm text-gray-500">
        在下方输入框中提问以继续对话
      </div>
    </div>
  );
} 